<div class="p-8">
    <div class="text-xl mb-4">
        {{ 'PAC.Project.CreateStory' | translate: {Default: 'Create Story'} }}
    </div>

    <div class="flex gap-4">
        <button class="pac-creation-card group w-40 h-30"
            (click)="createStory()">
            <svg width="100" height="100">
              <circle cx="50" cy="50" r="40" class="fill-bluegray-100 group-hover:fill-bluegray-200 group-focus:fill-bluegray-200"/>
              <rect x="25" y="48" width="50" height="4" fill="white"/>
              <rect x="48" y="25" width="4" height="50" fill="white"/>
            </svg>
            <span>
                {{ 'PAC.Project.New' | translate: {Default: 'New'} }}
            </span>
        </button>

        <button class="pac-creation-card group w-40 h-30"
            (click)="fromTemplate()">
            <svg class="my-2" width="40" height="40" xmlns="http://www.w3.org/2000/svg">
                <path d="M0 0v20h40V0H0Z" fill="#FDD663"></path>
                <path d="M0 0v40h20V0H0Z" fill="#FEEFC3"></path>
                <path d="M30 40c5.521 0 10-4.479 10-10s-4.479-10-10-10-10 4.479-10 10 4.479 10 10 10Z" fill="#FBBC04"></path>
            </svg>
            <span>
                {{ 'PAC.Project.Templates' | translate: {Default: 'Templates'} }}
            </span>
        </button>

        <div class="pac-creation-card pac-creation-card__upload w-60 h-40">
            <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-full rounded-lg cursor-pointer">
                <div class="flex flex-col items-center justify-center pt-5 pb-6">
                    <svg aria-hidden="true" class="w-10 h-10 mb-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"></path>
                    </svg>
                    <p class="mb-2 text-sm">
                        <span class="font-semibold">
                            {{ 'PAC.Project.ClicktoUpload' | translate: {Default: 'Click to upload'} }}
                            </span> {{ 'PAC.Project.OrDragandDrop' | translate: {Default: 'or drag and drop'} }}</p>
                    <p class="text-xs">{{ 'PAC.Project.StoryJsonFile' | translate: {Default: 'Story json file'} }}</p>
                </div>
                <input id="dropzone-file" #fileUpload type="file" class="hidden" (input)="onFileInput($event)"
                    (click)="fileUpload.value=null;"/>
            </label>
        </div>
    </div>

    <div class="text-xl my-4">
        {{ 'PAC.Project.RecentUpdates' | translate: {Default: 'Recent Updates'} }}
    </div>
    <div class="flex flex-wrap gap-4">
      @for (story of stories$ | async; track story.id) {
        <pac-story-card class="flex-1 min-w-full lg:min-w-[360px] lg:max-w-[720px]" [story]="story" storyLink="/project" />
      }
    </div>

</div>
